<template>
  <div>
    <el-card>
      <el-table :data="articleList" border>
        <el-table-column label="Id" prop="serialNumber" width="70px"></el-table-column>
        <el-table-column label="Title" prop="title"></el-table-column>
        <el-table-column label="Date" width="120px">
          <template slot-scope="{row}">
            {{row.date}}
          </template>
        </el-table-column>
        <el-table-column label="Author" prop="author" width="120px"></el-table-column>
        <el-table-column label="Importance" prop="importance" width="120px">
          <template slot-scope="{row}">
            <i class="el-icon-star-on star" v-for="(item, index) in row.importance" :key="index"></i>
          </template>
        </el-table-column>
        <el-table-column label="Status" prop="status" width="80px">
          <template slot-scope="{row}">
            <el-tag v-if="row.status === 1" type="success" size="mini">published</el-tag>
            <el-tag v-else type="info" size="mini">draft</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="Actions" width="80px">
          <template slot-scope="{row}">
            <el-button size="small" type="primary" @click="editCurrentArticle(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="getCurrentSizeData" @current-change="getCurrentPageData" :current-page="page.currentPage" :page-sizes="[3, 5, 8, 12]" :page-size="page.currentNum" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleList: [],
      page: {
        currentPage: 1,
        currentNum: 3
      },
      total: 0
    }
  },
  methods: {
    async getArticleList() {
      let res = ''
      if(this.$store.state.method === 1) {
        this.page.method = false
        res = await this.$http.get('edit/article', { params: this.page })
      }else {
        this.page.method = true
        res = await this.$http.get('add/article', { params: this.page })
      }
      res.response.forEach(item => {
        if(!this.page.method) {
          item.date = item.date.$date.split('T')[0]
          return
        }
        item.date = item.date.split('T')[0]
      })
      this.articleList = res.response
      if(this.$store.state.method === 1) {
        this.total = res.response.length
      }else {
        this.total = res.total
      }
    },
    editCurrentArticle(row) {
      this.$router.push({ name: 'editArticle', params: row })
    },
    getCurrentSizeData(size) {
      this.page.currentNum = size
      this.getArticleList()
    },
    getCurrentPageData(page) {
      this.page.currentPage = page
      this.getArticleList()
    }
  },
  created() {
    const _this = this
    setTimeout(function() {
      _this.getArticleList()
    }, 0)
  }
}
</script>

<style>
</style>
